<template>
    <div class="app">
        <myNavbar title="抢购记录"></myNavbar>
        <div class="coupon_choose">
            <div class="coupon_choose-list" @click="swichNav('1')">
                <text :class="[currentTab==1?'coupon_choose_title':'coupon_choose_title_no']">进行中</text>
                <text :class="[currentTab==1?'coupon_choose_line_no':'']"></text>
            </div>
            <div class="coupon_choose-list" @click="swichNav('0')">
                <text :class="[currentTab==0?'coupon_choose_title':'coupon_choose_title_no']">待付款</text>
                <text :class="[currentTab==0?'coupon_choose_line_no':'']"></text>
            </div>
            <div class="coupon_choose-list" @click="swichNav('2')">
                <text :class="[currentTab==2?'coupon_choose_title':'coupon_choose_title_no']">已转让</text>
                <text :class="[currentTab==2?'coupon_choose_line_no':'']"></text>
            </div>
            <div class="coupon_choose-list" @click="swichNav('3')">
                <text :class="[currentTab==3?'coupon_choose_title':'coupon_choose_title_no']">已提货</text>
                <text :class="[currentTab==3?'coupon_choose_line_no':'']"></text>
            </div>
        </div>



        <list>
            <refresh class="refresh" @refresh="onrefresh" @pullingdown="onpullingdown" :display="refreshing ? 'show' : 'hide'">
                <text class="indicator-text">{{refreshTitle}}</text>
            </refresh>
            <cell>
                <div class="contain" v-for="(item,index) in orderList">
                    <div class="rewardRecord-item">
                        <div class="contain-top">
                            <div class="contain-top-number">
                                <text class="font-size32">编号:{{item.id}}</text>
                            </div>
                            <div>
                                <text class="font-size32">{{item.status | filterStatus}}</text>
                            </div>
                        </div>
                        <div class="contain-middle">
                            <div class="contain-middle-left">
                                <img class="contain-middle-image" :src="item.thumbnail">
                            </div>
                            <div class="contain-middle-right">
                                <div class="middle-right-station-wrap">
                                  <text class="font-size32 middle-right-station">{{item.name}}</text>
                                </div>
                                <div class=""><text class="font-size32 font-color-gray">买入:￥{{item.price}} 转让:￥{{item.amount}}</text></div>
                                <div><text class="font-size32 font-color-gray">第{{item.periodNum}}期</text></div>
                                <div><text class="font-size32 font-color-gray">{{item.createDate}}</text></div>
                            </div>
                        </div>
                        <div class="contain-bottom">
                          <div class="contain-bottom-buttom" @click="sellerInformationClick(item)">
                            <text class="contain-bottom-buttom-text">卖家信息</text>
                          </div>
                            <div v-if="item.status==2 && !item.completeDate" class="contain-bottom-buttom" @click="toPayment(item,index)">
                                <text class="contain-bottom-buttom-text">支付</text>
                            </div>
                            <div v-if="item.status==0 && item.amount < item.marketPrice" class="contain-bottom-buttom" @click="transferClick(item,index)">
                                <text class="contain-bottom-buttom-text">转让</text>
                            </div>
                            <div v-if="item.status ==0 && !item.completeDate" class="contain-bottom-buttom" @click="deliveryClick(item,index)">
                                <text class="contain-bottom-buttom-text">提货</text>
                            </div>
                            <div v-if="item.status==3 && item.paymentDate >= 2" class="contain-bottom-buttom" @click="appealClick(item,index)">
                                <text class="contain-bottom-buttom-text">申诉</text>
                            </div>
                            <div v-if="item.status==3 && item.completeDate" class="contain-bottom-buttom" @click="completeClick(item,index)">
                                <text class="contain-bottom-buttom-text">收款</text>
                            </div>
                        </div>
                    </div>

                </div>
            </cell>
            <cell style="flex: 1;">
                <noData v-if="groupOrderList.length == 0" subTitle="可以去看看有哪些想买的" noDataText="您还没有相关的订单"></noData>
            </cell>
            <loading class="loading" v-if="groupOrderList.length >= 10" @loading="onloading" :display="loadinging ? 'show' : 'hide'">
                <text class="indicator-text">加载中...</text>
            </loading>

        </list>


      <div class="privacyBox" v-if="privacyType == true">
        <div class="privacyContent">
          <div style="display: flex;flex-direction: row;justify-content: flex-end">
            <text class="privacy_headerClode" @click='disagreeClick'>关闭</text>
          </div>
          <text class="privacy_title colorBlackblood" style="margin-top:30px;">申诉描述</text>
          <text class="privacy_title" style="margin-top:30px">上传申诉凭证</text>
          <div style="display: flex;flex-direction: row;justify-content: center">
            <upload @metaClick="metaClick($event,index)"></upload>
          </div>
          <textarea v-model="memo" placeholder="请输入申诉理由" class="textarea"></textarea>
          <div class="privacy_botton">
            <div class="privacy_botton_right" @click='agreeClick'>
              <text class="privacy_botton_right_ittle">提交申诉</text>
            </div>
          </div>
        </div>
      </div>
      <div class="privacyBox" v-if="sellerInformationflag == true">
                    <div class="privacyContent">
                      <div style="display: flex;flex-direction: row;justify-content: space-between">
                        <text class="privacy_headerClode padding-left20" >详情</text>
                        <text class="privacy_headerClode" @click='sellerDisagreeClick'>关闭</text>
                      </div>
                      <list style="height: 800px" >

                      <cell>
                      <text class="privacy_title" style="margin-top:30px" v-if="sellerInformation.memberName">姓名:{{sellerInformation.memberName}}</text>
                      <text class="privacy_title" style="margin-top:30px"  v-if="sellerInformation.memberNameMobile">联系方式:{{ sellerInformation.memberNameMobile}}</text>
                      <text class="privacy_title" style="margin-top:30px"  v-if="sellerInformation.liaisonName">紧急联系人:{{ sellerInformation.liaisonName}}</text>
                      <text class="privacy_title" style="margin-top:30px"  v-if="sellerInformation.liaisonMobile">紧急电话:{{ sellerInformation.liaisonMobile }}</text>
                      <text class="privacy_title" style="margin-top:30px"  v-if="sellerInformation.promoterName">推荐人 :{{sellerInformation.promoterName}}</text>
                      <text class="privacy_title" style="margin-top:30px"  v-if="sellerInformation.promoterNameMobile">推荐人联系方式 :{{sellerInformation.promoterNameMobile}}</text>

                      <text class="privacy_title" style="margin-top:30px"  v-if="sellerInformation.sellerName">卖家:{{sellerInformation.sellerName}}</text>
                      <text class="privacy_title" style="margin-top:30px"  v-if="sellerInformation.sellerMobile">卖家联系方式:{{ sellerInformation.sellerMobile }}</text>
                      <text class="privacy_title" style="margin-top:30px"  v-if="sellerInformation.sellerLiaisonName">卖家紧急联系人:{{ sellerInformation.sellerLiaisonName }}</text>
                      <text class="privacy_title" style="margin-top:30px"  v-if="sellerInformation.sellerLiaisonMobile">卖家紧急电话:{{ sellerInformation.sellerLiaisonMobile  }}</text>
                      <text class="privacy_title" style="margin-top:30px"  v-if="sellerInformation.sellerPromoterName">卖家推荐人 :{{sellerInformation.sellerPromoterName}}</text>
                      <text class="privacy_title" style="margin-top:30px"  v-if="sellerInformation.sellerPromoterMobile">卖家推荐人联系方式 :{{sellerInformation.sellerPromoterMobile}}</text>

                      <text class="privacy_title" style="margin-top:30px"  v-if="sellerInformation.buyerName">买家:{{sellerInformation.buyerName}}</text>
                      <text class="privacy_title" style="margin-top:30px"  v-if="sellerInformation.buyerPromoterMobile">买家联系方式:{{ sellerInformation.buyerPromoterMobile }}</text>
                      <text class="privacy_title" style="margin-top:30px"  v-if="sellerInformation.buyerLiaisonName">买家紧急联系人:{{ sellerInformation.buyerLiaisonName  }}</text>
                      <text class="privacy_title" style="margin-top:30px"  v-if="sellerInformation.buyerLiaisonMobile">买家紧急电话:{{ sellerInformation.buyerLiaisonMobile  }}</text>
                      <text class="privacy_title" style="margin-top:30px"  v-if="sellerInformation.buyerPromoterName">买家推荐人 :{{sellerInformation.buyerPromoterName }}</text>
                      <text class="privacy_title" style="margin-top:30px"  v-if="sellerInformation.buyerLiaisonMobile">买家推荐人联系方式 :{{sellerInformation.buyerLiaisonMobile}}</text>

                      <text v-if="sellerInformation.voucher" class="privacy_title" style="margin-top:30px"> 付款凭证</text>
                      <div v-if="sellerInformation.voucher" style="display: flex;flex-direction: row;justify-content: center;margin-top:30px">
                        <image  :src="sellerInformation.voucher" style="width: 500px;height: 500px"></image>
                      </div>

                      </cell>
                      </list>


                    </div>





      </div>




    </div>
</template>

<script>
const storage = weex.requireModule("storage");
import myNavbar from "./components/myNavbar/myNavbar.vue";
import {
    makeOver,
    accountList,
    delivery,
    list as auctionOrderList,
    appeal,
    complete,
    find,
} from "../../../api/auctionOrder";
import { list as bankList } from "../../../api/account";
import upload from "./components/upload/upload.vue";
export default {
    name: "rewardRecord",
    data() {
        return {
            auctionOrderId: "",
            currentTab: 1,
            groupOrderList: [],
            pageNum: 1,
            pageSize: 10,
            loadinging: false,
            refreshing: false,
            refreshTitle: "释放刷新页面...",
            groupBuyName: [],
            clickId: "",
            lastGroupBuyName: "",
            privacyType: false,
            orderList: [],
            voucher: "",
            memo: "",
            loadding: false,
            appealIndex: 0,
            bankList: [],
            sellerInformationflag:'',
            sellerInformation:{}
        };
    },
    components: { myNavbar, upload },
    created() {
        this.loadList();
        this.getBank();
    },
    filters: {
        filterStatus(val) {
            if (val == 0) {
                return "未上架";
            } else if (val == 1) {
                return "已上架";
            } else if (val == 2) {
                return "待付款";
            } else if (val == 3) {
                return "已付款";
            } else if (val == 4) {
                return "已流拍";
            } else if (val == 5) {
                return "申诉中";
            } else if (val == 6) {
                return "已转让";
            } else if (val == 7) {
                return "已提货";
            }
        },
        filterNum(val) {
            if (val == 0) {
                return "上午场";
            } else if (val == 1) {
                return "下午场";
            } else {
                return "晚上场";
            }
        },
    },
    methods: {
      sellerInformationClick(item){

        for(let key in  this.sellerInformation){
          delete  this.sellerInformation[key];
        }
          this.sellerInformationflag = true
          find(item.id).then((res) => {
              this.sellerInformation = res.data
              this.sellerInformation.voucher = item.voucher
          });
        },
        sellerDisagreeClick(){
          this.sellerInformationflag = false
        },
        getBank() {
            bankList()
                .then((res) => {
                    this.bankList = res.data;
                })
                .catch((respond) => {});
        },
        toPayment(item, index) {
            var _this = this;
            eeui.openPage(
                {
                    url: "root://pages/member/transferSystem/paymentDetails.js",
                    params: item,
                    statusBarType: "immersion",
                    statusBarStyle: false,
                },
                (result) => {
                    if (result.status == "stop") {
                        storage.getItem("auctionOrder", (event) => {
                            if (event.data == "true") {
                                _this.refreshClick(item, index);
                            }
                        });
                        storage.removeItem("auctionOrder", (event) => {});
                    }
                }
            );
        },
        transferClick(item, index) {
            var _this = this;
            if (_this.bankList == 0) {
                eeui.toast({
                    message: "请先添加收款方式",
                });
                return;
            }
            if (_this.loadding == true) {
                return;
            }
            _this.loadding = true;
            let params = {
                auctionOrderId: item.id,
            };
            makeOver(params)
                .then((res) => {
                    _this.loadding = false;
                    _this.orderList[index] = res.data;
                    _this.orderList[index].createDate = _this.formatTime(
                        _this.orderList[index].createDate
                    );
                    if (_this.orderList[index].paymentDate) {
                        _this.orderList[index].paymentDate = _this.difference(
                            _this.orderList[index].paymentDate,
                            new Date()
                        );
                    }
                    eeui.toast({
                        message: "转让成功",
                    });
                    _this.$forceUpdate();
                })
                .catch((error) => {
                    _this.loadding = false;
                });
        },
        deliveryClick(item, index) {
            var _this = this;
            if (_this.loadding == true) {
                return;
            }
            _this.loadding = true;
            let params = {
                auctionOrderId: item.id,
            };
            delivery(params)
                .then((res) => {
                    _this.loadding = false;
                    _this.orderList[index].createDate = _this.formatTime(
                        _this.orderList[index].createDate
                    );
                    if (_this.orderList[index].paymentDate) {
                        _this.orderList[index].paymentDate = _this.difference(
                            _this.orderList[index].paymentDate,
                            new Date()
                        );
                    }
                    eeui.toast({
                        message: "提货成功",
                    });
                    _this.$forceUpdate();
                })
                .catch((error) => {
                    _this.loadding = false;
                });
        },
        completeClick(item, index) {
            var _this = this;

            eeui.confirm(
                {
                    title: "温馨提示",
                    message: "您确定收款么？",
                    buttons: ["取消", "确定"],
                },
                function (result) {
                    if (result.status == "click" && result.title == "确定") {
                        if (_this.loadding == true) {
                            return;
                        }
                        _this.loadding = true;
                        let params = {
                            auctionOrderId: item.id,
                        };
                        complete(params)
                            .then((res) => {
                                _this.loadding = false;
                              _this.refreshClick(item, index)
                                eeui.toast({
                                    message: "收款成功",
                                });
                                // _this.$forceUpdate();
                            })
                            .catch((error) => {
                                _this.loadding = false;
                            });
                    }
                }
            );
        },

        appealClick(item, index) {
            this.appealIndex = index;
            this.auctionOrderId = item.id;
            this.privacyType = true;
        },
        disagreeClick() {
            this.privacyType = false;
        },

        metaClick($event, index) {
            this.voucher = $event.images[0];
        },
        agreeClick() {
            var _this = this;
            if (_this.loadding == true) {
                return;
            }
            _this.loadding = true;
            if (this.memo == "") {
                eeui.toast("申诉理由不能为空");
                return false;
            }
            let params = {
                auctionOrderId: this.auctionOrderId,
                voucher: this.voucher,
                memo: this.memo,
            };
            appeal(params)
                .then((res) => {
                    _this.loadding = false;
                    _this.orderList[_this.appealIndex] = res.data;
                    _this.orderList[_this.appealIndex].createDate =
                        _this.formatTime(
                            _this.orderList[_this.appealIndex].createDate
                        );
                    if (_this.orderList[_this.appealIndex].paymentDate) {
                        _this.orderList[_this.appealIndex].paymentDate =
                            _this.difference(
                                _this.orderList[_this.appealIndex].paymentDate,
                                new Date()
                            );
                    }
                    eeui.toast({
                        message: "提交成功",
                    });
                    this.privacyType = false;
                    _this.$forceUpdate();
                })
                .catch((error) => {
                    _this.loadding = false;
                });
        },

        swichNav(data) {
            this.pageNum = 1;
            this.currentTab = data;
            this.loadList();
        },
        loadList() {
            var _this = this;
            auctionOrderList({
                pageNum: _this.pageNum,
                pageSize: _this.pageSize,
                orderStatus: this.currentTab,
            }).then((res) => {
                this.orderList = [];
                res.data.data.forEach((element) => {
                    element.createDate = _this.formatTime(element.createDate);
                    if (element.paymentDate) {
                        element.paymentDate = _this.difference(
                            element.paymentDate,
                            new Date()
                        );
                    }
                    this.orderList.push(element);
                });
            });
        },

        onrefresh(event) {
            this.refreshing = true;
            this.refreshTitle = "加载中...";
            setTimeout(() => {
                this.pageNum = 1;
                this.refreshing = false;
                this.loadList();
            }, 1000);
        },
        onpullingdown(event) {
            this.refreshTitle = "释放刷新页面...";
        },
        onloading(event) {
            this.loadinging = true;
            setTimeout(() => {
                this.loadinging = false;
                this.pageNum += 1;
                this.loadList();
            }, 1000);
        },
        refreshClick(item, index) {
            var _this = this;
            find(item.id).then((res) => {
                _this.orderList[index] = res.data.auctionOrder;
                _this.orderList[index].createDate = _this.formatTime(
                    _this.orderList[index].createDate
                );
                if (_this.orderList[index].paymentDate) {
                    _this.orderList[index].paymentDate = _this.difference(
                        _this.orderList[index].paymentDate,
                        new Date()
                    );
                }
                _this.$forceUpdate();
            });
        },
        difference: function (beginTime, endTime) {
            var dateBegin = new Date(beginTime);
            var dateEnd = new Date(endTime);
            var dateDiff = dateEnd.getTime() - dateBegin.getTime(); //时间差的毫秒数
            var dayDiff = Math.floor(dateDiff / (24 * 3600 * 1000)); //计算出相差天数
            var leave1 = dateDiff % (24 * 3600 * 1000); //计算天数后剩余的毫秒数
            var hours = Math.floor(leave1 / (3600 * 1000)); //计算出小时数
            return dayDiff * 24 + hours;
        },
    },
};
</script>

<style scoped>
.app {
    background-color: rgba(248, 248, 248, 1);
}
.coupon_choose {
    /* position: fixed; */
    width: 750px;
    text-align: center;
    line-height: 80px;
    padding-left: 26px;
    padding-right: 26px;
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    justify-content: center;
    height: 76px;
    background-color: #fff;
}
.coupon_choose-list {
    flex: 1;
    height: 70px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.coupon_choose_title {
    font-size: 32px;
    font-weight: 500;
    padding-bottom: 5px;
    color: rgba(215, 38, 28, 1);
    margin-bottom: 5px;
}
.coupon_choose_title_no {
    /*font-size: 28px;*/
    font-size: 32px;
    font-weight: 500;
    padding-bottom: 5px;
    color: rgba(102, 102, 102, 1);
}
.coupon_choose_line {
    width: 34px;
    height: 6px;
}
.coupon_choose_line_no {
    background-color: rgb(231, 91, 83);
    height: 4px;
    width: 50px;
}
.refresh {
    width: 750px;
    display: -ms-flex;
    display: -webkit-flex;
    display: flex;
    -ms-flex-align: center;
    -webkit-align-items: center;
    -webkit-box-align: center;
    align-items: center;
    padding-top: 10px;
    padding-bottom: 10px;
}
.loading {
    width: 750px;
    display: -ms-flex;
    display: -webkit-flex;
    display: flex;
    -ms-flex-align: center;
    -webkit-align-items: center;
    -webkit-box-align: center;
    align-items: center;
    padding-top: 40px;
    padding-bottom: 40px;
}
.indicator-text {
    color: #888888;
    font-size: 22px;
    text-align: center;
    padding-top: 20px;
}
.groupCard_content {
    width: 710px;
    height: 80px;
    display: flex;
    flex-direction: row;
}
.groupCard_item {
    height: 80px;
    align-items: center;
    margin-left: 20px;
    margin-right: 30px;
    border-radius: 16px;
}
.groupCard_item_text {
    font-size: 32px;
    font-weight: bold;
    color: rgb(231, 91, 83);
    margin-top: 20px;
    text-align: center;
}
.groupCard_item_text_two {
    font-size: 28px;
    /* font-weight: bold; */
    color: black;
    margin-top: 20px;
    text-align: center;
}
.groupCard_item_text_div {
    width: 70px;
    background-color: rgb(231, 91, 83);
    height: 7px;
    /*margin-left:20px;*/
    margin-top: 5px;
}

.contain-top {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    padding: 20px 0;
}
.contain-middle {
    padding: 20px 0;
    display: flex;
    flex-direction: row;

    border-top-style: solid;
    border-top-width: 1px;
    border-top-color: #d9d9d9;

    border-bottom-style: solid;
    border-bottom-width: 1px;
    border-bottom-color: #d9d9d9;
}
.contain-middle-image {
    width: 180px;
    height: 180px;
}
.rewardRecord-item {
    margin-top: 10px;
    padding: 0 20px;
    width: 750px;
    background-color: white;
}
.contain-bottom {
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    padding: 20px 0;
}
.contain-bottom-buttom {
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    margin-left: 20px;
    border-radius: 12px;
}
.contain-bottom-buttom-text {
    padding: 10px 10px;
    color: white;
    font-size: 32px;
    background-color: #05c48e;
}

.font-size32 {
    font-size: 32px;
}
.font-color-gray {
    color: #999;
}
.middle-right-station-wrap {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    overflow: hidden;
    width: 400px;
}
.middle-right-station {
    padding: 3px 6px;
    color: white;
    border-radius: 12px;
    overflow: hidden;
    text-overflow: ellipsis;
    lines: 1;
     background-color: #ff5555;
}

.indicator-text {
    color: #888888;
    font-size: 42px;
    text-align: center;
}

.loading {
    width: 750px;
    display: -ms-flex;
    display: -webkit-flex;
    display: flex;
    -ms-flex-align: center;
    -webkit-align-items: center;
    -webkit-box-align: center;
    align-items: center;
}

.privacyBox {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.4);
    display: flex;
    justify-content: center;
    align-items: center;
}
.privacyContent {
    width: 650px;
    background-color: white;
    border-radius: 12px;
    display: flex;
    padding-bottom: 50px;
}
.privacy_headerTitle {
    font-size: 32px;
    color: #333333;
    margin-top: 30px;
    padding-left: 20px;
}
.privacy_headerClode {
    font-size: 32px;
    color: #333333;
    margin-right: 30px;
    margin-top: 20px;
}

.privacy_botton {
    width: 650px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    padding-left: 30px;
    padding-right: 30px;
    box-sizing: border-box;
    margin-top: 30px;
}
.privacy_botton_left {
    width: 280px;
    height: 80px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: rgba(202, 250, 241, 1);
    border-radius: 50px;
}
.privacy_botton_left_title {
    font-size: 22px;
    color: rgba(42, 195, 185, 1);
}
.privacy_botton_right {
    width: 600px;
    height: 80px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: rgba(0, 222, 189, 1);
    border-radius: 50px;
}
.privacy_botton_right_ittle {
    color: white;
    font-size: 22px;
}
.privacy_title {
    font-size: 30px;
    color: #999999;
    padding-left: 30px;
    padding-right: 30px;
    box-sizing: border-box;
}

.textarea {
    margin-left: 20px;
    font-size: 32px;
    padding-top: 10px;
    padding-bottom: 10px;
    padding-left: 20px;
    padding-right: 20px;
    color: #666666;
    border-width: 2px;
    border-style: solid;
    border-color: lightgray;
    width: 600px;
    border-radius: 12px;
}
.colorBlackblood {
    color: black;
    font-size: 34px;
}
.padding-left20{
  padding-left: 20px;
}
</style>
